<template>
  <q-form @submit="submit" class="q-gutter-md dialog-content" ref="myForm" style="height: 567px">
    <div>
      <div class="detail-container flex">
        <div class="margin-r-20">网关序列号: {{ driverParams.gatewaySN || '-' }}</div>
        <div class="margin-r-20">网关型号: {{ driverParams.productName || '-' }}</div>
      </div>
      <q-separator />
      <div class="container" :style="{height: isCompete? '520px': '460px'}">
        <yz-input v-model="queryParams.device"
                  inputType="select"
                  class="content-width"
                  :rules="[0]"
                  :options="deviceList"
                  title="关联设备"
        />
        <yz-input v-model="queryParams.driver"
                  inputType="select"
                  class="content-width"
                  :rules="[0]"
                  :options="driverList"
                  title="选择驱动"
        />
        <div v-if="queryParams.driver" class="driver-detail flex justify-between content-width margin-b-20">
          <div>
            <div>控制器类型: {{ driverDetail[0] }}</div>
            <div>控制器型号: {{ driverDetail[2] }}</div>
            <div>IOT接口: {{ driverDetail[4] }}</div>
          </div>
          <div>
            <div>控制器品牌: {{ driverDetail[1] }}</div>
            <div>协议名称: {{ driverDetail[3] }}</div>
          </div>
        </div>

        <yz-input v-model="queryParams.version"
                  inputType="select"
                  class="content-width"
                  :rules="[0]"
                  :options="versionListAll"
                  title="驱动版本"
        />
      </div>
      <q-separator/>
    </div>
    <div class="dialog-footer text-center margin-t-10">
      <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
      <q-btn unelevated label="下一步" color="primary" type="submit" :loading="submitting"/>
    </div>
  </q-form>
</template>

<script>
import { getBindDriverList } from '../../../../../boot/miot/plc-list'
import { cncDriverBind, getDeviceCNC } from '../../../../../boot/miot/list'

export default {
  name: 'driver-config',
  props: {
    type: {
      type: Number,
      default: 1
    },
    products: {
      type: Array,
      default: () => []
    },
    driverParams: {
      type: Object,
      default: () => {}
    },
    selectDriverInfo: {
      type: Object,
      default: () => {}
    },
    isCompete: {
      type: Boolean,
      default: false
    }
  },
  created () {
    this.getDeviceList()
    this.getDriverList()
  },
  data () {
    return {
      submitting: false,
      queryParams: {
        device: '',
        driver: '',
        version: ''
      },
      driverInfo: {},
      driverList: [],
      versionList: [],
      deviceList: []
    }
  },
  watch: {
    'queryParams.driver': {
      handler: function () {
        this.queryParams.version = this.versionListAll[0]?.value || ''
      }
    }
  },
  computed: {
    versionListAll () {
      if (this.queryParams.driver) {
        return this.driverInfo[this.queryParams.driver] || []
      }
      return []
    },
    // 根据选择的driver获取详情
    driverDetail () {
      if (this.driverList.length > 0 && this.queryParams.driver) {
        const info = this.driverList.find(item => item.value === this.queryParams.driver)
        return info?.label?.split('_') || []
      }
      return []
    }
  },
  methods: {
    async getDeviceList () {
      const { data } = await getDeviceCNC()
      this.deviceList = data.map(item => {
        return {
          label: `${item.device_name}(${item.device_num})`,
          value: item.device_num
        }
      })
    },
    getDriverList () {
      const params = {
        gatewayId: this.driverParams.gatewayId,
        productId: this.driverParams.productId
      }
      getBindDriverList(params).then(res => {
        const resData = res.data
        if (resData) {
          const driverList = resData.map(item => {
            this.driverInfo[item.driverID] = item?.versionList?.map(v => ({
              label: v.version,
              value: v.version
            }))
            return {
              label: item.driverName,
              value: item.driverID
            }
          })
          this.driverList = driverList.filter(item => item.label.startsWith('CNC'))
        }
        // 回显数据
        if (this.selectDriverInfo && Object.keys(this.selectDriverInfo).length > 0) {
          this.queryParams.driver = this.selectDriverInfo.driver ? this.selectDriverInfo.driver : ''
          this.queryParams.device = this.selectDriverInfo.device ? this.selectDriverInfo.device : ''
          this.$nextTick(() => {
            this.queryParams.version = this.selectDriverInfo.version ? this.selectDriverInfo.version : ''
          })
        }
      })
    },
    submit () {
      const cncModelItem = this.products.find(item => item.name === 'CNC_Model')
      if (!cncModelItem) {
        this.$message.error('机床物模型不存在 无法创建')
        return
      }
      const data = {
        'boxNum': this.driverParams.boxNum,
        'ucloudBoxNum': this.driverParams.ucloudBoxNum,
        'hwProductId': cncModelItem.product_id,
        'deviceNum': this.queryParams.device,
        'gatewayId': this.driverParams.gatewayId,
        'productId': this.driverParams.productId,
        'driverId': this.queryParams.driver,
        'version': this.queryParams.version,
        'subDeviceId': this.driverParams.subDeviceId
      }
      this.submitting = true
      cncDriverBind(data).then(res => {
        const driverName = this.driverList.find(item => item.value === this.queryParams.driver)?.label + '_' + this.queryParams.version
        this.$emit('successSubmit', {
          driverName,
          ...res.data })
      }).finally(() => {
        this.submitting = false
      })
    },
    hideDialog () {
      this.$emit('hideDialog')
    }
  }
}
</script>

<style scoped lang="scss">
.content-width {
  width: 440px;
}

.container {
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .driver-detail {
    padding: 0 30px;
    font-size: 16px;
    line-height: 2;
  }
}
.detail-container{
  padding: 20px;
  font-size: 14px;
  line-height: 1;
}

</style>
